<script setup>
import {computed, onMounted, ref} from 'vue'

const bgstr = ref([])
const randcolor = () => {
  let str = '123456789abcdef'
  let cs = '#'
  for (let i = 0; i < 8; i++) {
    cs += str.charAt(Math.round(Math.random() * (str.length - 1)))
  }
  bgstr.value.push(cs)
  return cs
}

onMounted(() => {
  setInterval(() => {
    document.body.style.backgroundColor = randcolor()
  }, 5000)
})

document.body.style.backgroundColor = randcolor()

function aa(event) {
  document.body.style.backgroundColor = event.target.innerHTML
}

const rand = computed(randcolor)
</script>

<template>
  <button v-for="(item,index) in 10" @click="aa" :style="{backgroundColor:randcolor()}">{{ bgstr[index] }}</button>
</template>

<style scoped>
button {
  padding: 8px;
  margin: 5px;
  border: 1px dashed rgba(51, 51, 51, 0.45);
  border-radius: 4px;
}
</style>
